@charset "UTF-8";
@keyframes RotatingSieve {
    0% {
        transform: rotateZ(40deg) rotateY(0);
    }
    100% {
        transform: rotateX(-165deg) rotateY(300deg);
    }
}

.box {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
    perspective-origin: 50% 50%;
    perspective: 3000px;
}


/* .line-1:hover {
    transform: translateZ(400px);
}

.line-2:hover {
    transform: translateZ(400px);
} */

.box>.sieve:hover {
    animation-play-state: paused;
}


/* .line-4:hover {
    transform: translateZ(400px);
}

.line-5:hover {
    transform: translateZ(400px);
}

.line-6:hover {
    transform: translateZ(400px);
} */

.sieve {
    height: 100%;
    transform-style: preserve-3d;
    animation: RotatingSieve 15s infinite linear;
    border-radius: 50%;
}

.sieve>div {
    width: 100%;
    height: 100%;
    border: 1px solid #fff;
    position: absolute;
}

.point,
.point5-1,
.point3-1,
.point3-3 {
    width: 60px;
    height: 60px;
    background-color: red;
    border: 0 solid #000;
    border-radius: 50%;
}

.point3-1 {
    position: relative;
    top: -94px;
}

.point3-3 {
    position: relative;
    bottom: -94px;
}

.point5-1 {
    position: relative;
    top: 118px;
    left: 3px;
}

.sieve .line-1 {
    transform: translateZ(-300px);
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.sieve .line-2 {
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    background-color: #fff;
}

.groupA,
.groupB {
    width: 300px;
    display: flex;
    justify-content: space-around;
}

.groupC,
.groupD {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.groupE,
.groupF {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.sieve .line-3 {
    transform: rotateY(-90deg) translateX(-150px) translateZ(150px);
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
}

.sieve .line-4 {
    transform: rotateY(-90deg) translateX(-150px) translateZ(-150px);
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    background-color: #fff;
}

.sieve .line-5 {
    transform: rotateX(90deg) translateZ(300px);
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    background-color: #fff;
}

.sieve .line-6 {
    transform: rotateX(90deg) translateZ(0px);
    transform-origin: bottom;
    border-color: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
}